<template>
    <div>
        <div>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/home' }" class="el-icon-s-fold">首页</el-breadcrumb-item>
                <el-breadcrumb-item>借款管理</el-breadcrumb-item>
                <el-breadcrumb-item>借款资格审批</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <!--表头导航栏模块-->
        <div>
            <el-form
                    ref="form"
                    :inline="true"
                    :model="formInline"
                    class="demo-form-inline">
                <el-form-item label="查找" prop="umName">
                    <el-input v-model="formInline.umName" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item prop="uMobile">
                    <el-input v-model="formInline.uMobile" placeholder="手机"></el-input>
                </el-form-item>
                <el-form-item prop="umIdcard">
                    <el-input v-model="formInline.umIdcard" placeholder="身份证"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-search" type="primary" @click="queryUserManager">查询</el-button>
                    <el-button icon="el-icon-delete"  @click="noQuery">清空</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--主体内容模块-->
        <div>
            <el-table
                    :data="tableData"
                    :row-style="selectedstyle"
                    style="width: 100%">
                <el-table-column
                        prop="umId"
                        label="序号"
                        width="60">
                </el-table-column>
                <el-table-column
                        prop="umName"
                        label="姓名"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="uMobile"
                        label="手机"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="umInsertTime"
                        label="申请时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="umIdcard"
                        label="身份证号码"
                        width="240">
                </el-table-column>
                <el-table-column
                        prop="umIsmarried"
                        label="是否已婚"
                        show-overflow-tooltip
                        :formatter="formtype">
                </el-table-column>
                <el-table-column
                        prop="umIspass"
                        label="状态"
                        show-overflow-tooltip
                        :formatter="passformtype">
                </el-table-column>

                <el-table-column
                        fixed="right"
                        label="操作"
                    width="100">
                    <template slot-scope="scope">
                        <el-button  @click="handleClick(scope.row.umId)"  size="small" type="warning" round>审批</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--分页模块-->
        <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageNum"
                        :page-sizes="[5,10,20,30]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
        </div>

    </div>
</template>

<script>
    export default {
        name: "Load",
        data() {
            return {
                //主体数据
                tableData: [],
                //条件查询参数
                formInline: {
                    umName :'',
                    uMobile:'',
                    umIdcard:''
                },
                pageNum: 1,
                pageSize: 5,
                total:0,//共多少条
            }
        },
        methods:{
            //根据信息来渲染不同的布局属性
            selectedstyle ({row, rowIndex}) {
                if(row.umIspass==0){
                    return {
                        "background-color": "#C9C5C8"
                    };
                }else if(row.umIspass==2){
                    return {
                        "background-color": "#ABEA7F"
                    };
                }else if(row.umIspass==1){
                    return {
                        "background-color": "#F0C1E5"
                    };
                }
            },
            //分页查询函数，条件查询函数
            queryUserManager(){
                let url =this.$baseUrl+"userManager/showUserManager"
                this.$axios.get(url,{
                    params:{
                        umName:this.formInline.umName,
                        uMobile:this.formInline.uMobile,
                        umIdcard:this.formInline.umIdcard,
                        pageNum:this.pageNum,
                        pageSize:this.pageSize
                    }
                }).then(res=>{
                    if (res.data.code == 200){
                        this.tableData = res.data.data.list;
                        this.pageNum = res.data.data.pageNum;
                        this.pageSize = res.data.data.pageSize;
                        this.total = res.data.data.total
                    }else {
                        this.$alert("查询失败!")
                    }
                })
            },
            //清空from表单函数  ?
            noQuery(){
                this.$refs.form.resetFields()
            },
            handleSizeChange(size){
                this.pageSize = size;
                this.queryUserManager();
            },
            handleCurrentChange(val){
                this.pageNum = val;
                this.queryUserManager();
            },
            //判断是否已婚，返回对应文字
            formtype(row, column, cellValue){
                if (cellValue == 1){
                    return '已婚';
                }else if (cellValue == 0){
                    return '未婚';
                }
            },
            passformtype(row, column, cellValue){
                if (cellValue == 0){
                    return '否';
                }else if (cellValue == 1){
                    return '待审核';
                }else if (cellValue == 2){
                    return '通过';
                }
            },
            handleClick(umId){
                this.$router.push("/userMessage/"+umId);
            }
        },
        created(){
            this.queryUserManager()
        }
    }
</script>

<style scoped>

</style>